<template>
  <div>
    <a-table class="table" :rowKey="(row) => row.id" :data-source="data" :pagination="pagination">
      <a-table-column title="主卡组" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <div class="thumb">
              <img v-if="row.package_type" style="width: 58px; height: 86px; margin-left: 21px" :src="row.deck_thumb" />
              <img v-else style="width: 100px; height: 105px" :src="row.deck_thumb" alt="" />
            </div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="主卡组详情" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span>用户：{{ row.name }}</span>
            <span>id：{{ row.applied_user_id }}</span
            ><br />
            <span>卡组名称：{{ row.card_deck_name }}</span
            ><br />
            <span>卡组详情：{{ row.deck_desc ? row.deck_desc : '暂无详情' }}</span
            ><br />
            <span>创建时间：{{ row.created_at }}</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="操作" width="200px">
        <template slot-scope="row">
          <span>
            <span v-if="row.exchange_status === 6" style="color: red">已解除</span>
            <a href="javascript:;" @click="handleCheck(row)">查看</a>
          </span>
        </template>
      </a-table-column>
      <a-table-column title="交换卡组" width="200px">
        <template slot-scope="row">
          <!-- <div class="product-info">
            <span> {{ row.created_at }}</span>
          </div> -->
          <div v-for="item in row.card_exchange">
            <!-- <img v-if="row.package_type" style="width: 58px; height: 86px; margin-left: 21px" :src="item.deck_thumb" />
            <img v-else style="width: 100px; height: 105px" :src="item.deck_thumb" alt="" /> -->
            <span>用户：{{ item.name }}</span>
            <span>id：{{ item.apply_user_id }}</span
            ><br />
            <span>卡组名称：{{ item.card_deck_name }}</span
            ><br />
            <span>卡组详情：{{ item.deck_desc ? item.deck_desc : '暂无详情' }}</span
            ><br />
            <span>创建时间：{{ item.created_at }}</span>
            <span>
              <span v-if="item.exchange_status === 2" style="color: red">交换完成</span>
              <span v-if="item.exchange_status === 3" style="color: red">已拒绝</span>
            </span>
            <a href="javascript:;" @click="handleCheck(item)">查看</a>
          </div>
        </template>
      </a-table-column>
      <!-- <a-table-column title="用户" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span v-if="row.status === 0">未交换</span>
            <span v-if="row.status === 1">交换中</span>
            <span v-if="row.status === 2">交换完成</span>
            <span v-if="row.status === 3">已解除</span>
          </div>
        </template>
      </a-table-column> -->
      <!-- <a-table-column title="操作" width="200px">
        <template slot-scope="row">
          <span>
            <a href="javascript:;" @click="handleCheck(row)">查看</a>
          </span>
        </template>
      </a-table-column> -->

      <!-- <a-table-column title="" width="200px"></a-table-column> -->
    </a-table>
    <EditSkuList ref="modal" @ok="handleOk" :deckList="deckList" @cancel="handleCancel"></EditSkuList>
  </div>
</template>
<script>
import EditSkuList from './components/modal.vue'
export default {
  components: {
    EditSkuList,
  },
  data() {
    return {
      data: [],
      modalVisible: false,
      deckList: [],
      card_deck: [],
      keyValue: '',
      pagination: {
        // 分页配置
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        total: 0, // 数据总数
        onChange: this.handlePageChange, // 切换页码时的回调函数
      },
      modalVisible: false,
      deckId: null,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handlePageChange(e){
      this.pagination.current = e
      this.getData()
    },
    getData() {
      this.$http
        .get('/card/exchange', {
          params: {
            page: this.pagination.current,
            per_page: this.pagination.pageSize,
          },
        })
        .then((res) => {
          // console.log('res', res.data)
          this.pagination.total = res.data.item_total
          this.data = res.data.list
        })
    },
    handleCheck(row) {
      
      //   this.deckId = row.applied_card_deck_id
      // console.log(row)
      this.$http.get(`/card/package/${row.applied_card_deck_id}`).then((res) => {
       
        this.deckList = res.data.list
        // this.deckList = Object.entries(this.deckList);
        // console.log('this.deckList',this.deckList)
      })
      this.$refs.modal.visible = true
    },
    handleOk() {
      this.$refs.modal.visible = false
      this.deckList = []
      // 处理确认操作
    },
    handleCancel() {
      this.$refs.modal.visible = false
      this.deckList = []
      // 处理取消操作
    },
  },
}
</script>
<style lang="scss" scoped></style>
